<template>
  <div>
      我是hello组件，我封装了很多的方法
  </div>
</template>
<script>

import axios from 'axios';
import queryString from 'queryString';

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

var HTTP = axios.create({
    // 便于axios发送请求时的相对url
    baseURL: 'https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue',
    // 响应时间(超过该时间就停止请求--请求超时)
    // timeout: 10000,
    // 设置请求头,后端可以拿到(到控制台的network查看)
    headers: {
        // 试试看注释这一行并查看post发送请求时传的参数格式(network查看)  (可以支持post支持上传图片等)
        // 'content-type': 'application/x-www-form-urlencoded'
    },
    // 默认数据格式为json
    responseType: 'json',
    // 查询字符串（地址栏后面）
    params: {
        // 举例：(到控制台的network查看)
        // book: 98765
    },
    // // 转换数据(请查看视频和文档)
    // transformRequest: [function(data){
    //     console.log(data);
    //     // 发送请求前可以处理发送的参数
    //     data.index = 666;
    //     return queryString.stringify(data);
    // }],
    // transformResponse: [function(data){
    //     console.log("transformResponse");
    //     console.log(data);
    //     // 可以处理返回的数据
    //     data.man = 222;
    //     return data;
    // }],
    validateStatus(status){
        // status是状态码，我们可以手动设置状态码的范围来决定是否成功响应还是响应失败
        console.log(status);
        return status < 400
    },

    // 配置取消令牌
    cancelToken: source.token

    // 还有很多配置，请查看文档
})





// 拦截请求
    HTTP.interceptors.request.use(function(config){
        // 在发送请求之前执行...
        // 注释return config你会发现请求被拦截了
        return config
        }, function(error){
            // 请求错误执行...
            return Promise.reject(error);
        })

// 拦截响应
    HTTP.interceptors.response.use(function(data){
        console.log('reponse' + data);
        return data;
    });

// 取消拦截
    //  HTTP.interceptors.request.reject(myInterceptor);





export default {
  created () {
      HTTP.post('/axios-post',{
          miaov: 'ketang',
          userName: 'leo'
      })
        .then((response) => {
            console.log('这里是hello文件中封装了axios后发送的请求');
            // console.log(response.data.data);
        })
        .catch((error) => {
            // console.log('报错啦：' + error);

            // 捕获取消错误
            if(axios.isCancel(error)){
                // 用户取消
                console.log(error.message)
            }else {
                // 服务端出错
                console.log(error);
            }

        })

      // 这里调用取消方法
    //   source.cancel('操作被用户取消，因为时间太长了');






    // axios的并发请求
    function http1(){
        return HTTP.get('/axios-get');
    }
    function http2(){
        return HTTP.post('/axios-post');
    }
    axios.all([http1(), http2()])
        .then(axios.spread((res1, res2) => {
            console.log(res1);
            console.log(res2);
        }))
        .catch((error) => {
            console.log(error)
        })


    


  }
}
</script>
<style scoped>

</style>
